<template>
	<view style="margin-left: 40rpx;margin-right: 40rpx;">
		<view style="text-align: center;margin-top: 60rpx;">
			<text style="font-weight: 600;font-size: 38rpx;">登录</text>
		</view>
		<view style="text-align: center;margin-top: 140rpx;">
			<image style="width: 200rpx;height: 200rpx;" src="/static/login/loginLogo.png" />
		</view>
		<view style="text-align: center;">
			<text style="font-weight: 600;font-size: 42rpx;">膜品科技</text>
		</view>
		<view style="text-align: center;margin-top: 160rpx;">
			<u-checkbox style="margin-right: -10rpx;" active-color="#0f2b8d" v-model="isChecked"></u-checkbox>
			<text style="font-size: 24rpx;margin-right: 10rpx;">登录注册代表同意膜品</text>
			<text style="font-size: 24rpx;color:#0f2b8d;" @click="toShowAgreement('userAgreement')">《用户使用协议》</text>
			<text style="font-size: 24rpx;margin-left: 10rpx;margin-right: 10rpx;">和</text>
			<text style="font-size: 24rpx;color:#0f2b8d;" @click="toShowAgreement('privacyAgreement')">《隐私政策》</text>
		</view>
		<view
			style="height: 80rpx;width: 100%; text-align: center;margin-top: 40rpx;display: flex;flex-direction: column;justify-content: center;">
			<button v-if="isChecked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				style="width: 100%;background-color: #0f2b8d;color: #fff;font-size: 30rpx;">手机号快捷登录</button>
			<button v-else @click="checked"
				style="width: 100%;background-color: #0f2b8d;color: #fff;font-size: 30rpx;">手机号快捷登录</button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-modal :value="showUsers" negativeTop="10rpx" showConfirmButton zoom confirmColor="#0f2b8d" :showTitle="false"
			@confirm="showUsers=false">
			<template #default>
				<scroll-view scroll-y="true" class="scroll_type">
					<text>{{ users }}</text>
				</scroll-view>
			</template>
		</u-modal>
		<u-modal :value="showPrivacy" negativeTop="10rpx" showConfirmButton zoom confirmColor="#0f2b8d"
			:showTitle="false" @confirm="showPrivacy=false">
			<template #default>
				<scroll-view scroll-y="true" class="scroll_type">
					<text>{{ privacy }}</text>
				</scroll-view>
			</template>
		</u-modal> -->
	</view>
</template>

<script>
	import toast from '../../../uview-ui/libs/function/toast';
	// import {
	// 	privacyAgreement
	// } from '@/common/privacyAgreement.js'
	// import {
	// 	userAgreement
	// } from '@/common/userAgreement.js';
	export default {
		data() {
			return {
				// privacy: privacyAgreement,
				// users: userAgreement,
				// showPrivacy: false,
				// showUsers: false,
				isChecked: false,
				form: {
					phoneCode: '',
					userCode: '',
				},
				nextUrl: ''
			}
		},
		methods: {
			toShowAgreement(type){
				uni.navigateTo({
					url:'/pages/my/compontents/'+type
				})
			},
			checked() {
				if (!this.isChecked) {
					this.$refs.uToast.show({
						type: 'warning',
						title: "请阅读并勾选以上协议"
					});
					return
				}
			},
			async getPhoneNumber(e) {
				let that = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					await uni.login({
						async success(res) {
							that.form.userCode = res.code;
							that.form.phoneCode = e.detail.code;
							let resp = await that.$api.wxPhoneLogin(that.form);
							if(!resp?.success){
								uni.showToast({
									title: "登录失败，请重试！",
									icon:'error'
								})
								return;
							}
							that.$u.vuex('phone_login_token', resp.result.token);
							that.$u.vuex('user_message', JSON.stringify(resp.result.mpUser));
							// that.$refs.uToast.show({
							// 	type: 'success',
							// 	title: "登录成功！"
							// });
							if (that.nextUrl === '/pages/my/my') {
								uni.navigateBack({
									complete() {
										uni.showToast({
											title: "登录成功！"
										})
									}
								});
							} else {
								uni.redirectTo({
									url: that.nextUrl,
									complete() {
										uni.showToast({
											title: "登录成功！"
										})
									}
								});
							}
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						title: "手机号快速登录需要授权后进行"
					});
					return;
				}
			},
		},
		onLoad(options) {
			this.nextUrl = (options.nextUrl != null && options.nextUrl != '/pages/my/compontents/wxLogin') ?
				options.nextUrl : '/pages/my/my';
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	/* 未选中的背景样式 */
	checkbox .wx-checkbox-input {
		width: 36rpx;
		height: 36rpx;
	}

	checkbox::before {
		background-color: #fff;
		color: #0f2b8d !important;
	}
</style>
<style scoped lang="scss">
	.scroll_type {
		width: 100%;
		height: 50vh;
		padding: 16rpx 35rpx 0 35rpx;

		text {
			line-height: 55rpx;
		}
	}
</style>